書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-catchText g-fontFamily-gothic"><span><span><span></span></span></span>
            <div class="t0-b-catchText__text-sub"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.0">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub2"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.1">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-main"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.2">キャッチコピーを入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub3"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.3">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub4"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.4">キャッチコピーの補足を入れてください</p>
            </div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-catchText2 g-fontFamily-gothic"><span><span><span></span></span></span>
            <div class="t0-b-catchText2__text-sub"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.0">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub2"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.1">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-main"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.2">キャッチコピーを入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub3"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.3">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub4"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.4">キャッチコピーの補足を入れてください</p>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-catchText g-fontFamily-mincho"><span><span><span></span></span></span>
            <div class="t0-b-catchText__text-sub"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.0">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub2"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.1">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-main"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.2">キャッチコピーを入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub3"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.3">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub4"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.4">キャッチコピーの補足を入れてください</p>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-catchText2 g-fontFamily-mincho"><span><span><span></span></span></span>
            <div class="t0-b-catchText2__text-sub"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.0">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub2"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.1">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-main"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.2">キャッチコピーを入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub3"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.3">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub4"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.4">キャッチコピーの補足を入れてください</p>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-catchText g-fontFamily-marugo"><span><span><span></span></span></span>
            <div class="t0-b-catchText__text-sub"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.0">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub2"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.1">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-main"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.2">キャッチコピーを入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub3"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.3">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText__text-sub4"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.4">キャッチコピーの補足を入れてください</p>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-catchText2 g-fontFamily-marugo"><span><span><span></span></span></span>
            <div class="t0-b-catchText2__text-sub"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.0">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub2"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.1">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-main"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.2">キャッチコピーを入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub3"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.3">キャッチコピーの補足を入れてください</p>
            </div>
            <div class="t0-b-catchText2__text-sub4"><span><span><span></span></span></span>
                <p data-cms-path="data.contents.4">キャッチコピーの補足を入れてください</p>
            </div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv1H-mainH t0-b-lv1H-mainH--align- g-fontFamily-gothic">
            <span><span><span></span></span></span>
            <div class="t0-b-lv1H-mainH__caption-upper" data-cms-path="data.contents.0">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
            <h1 class="t0-b-lv1H-mainH__bd" data-cms-path="data.contents.1">ページ見出し</h1>
            <div class="t0-b-lv1H-mainH__caption-lower" data-cms-path="data.contents.2">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv1H-mainH2 t0-b-lv1H-mainH2--align- g-fontFamily-gothic">
            <span><span><span></span></span></span>
            <div class="t0-b-lv1H-mainH2__caption-upper" data-cms-path="data.contents.0">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
            <h1 class="t0-b-lv1H-mainH2__bd" data-cms-path="data.contents.1">ページ見出し</h1>
            <div class="t0-b-lv1H-mainH2__caption-lower" data-cms-path="data.contents.2">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv1H-mainH t0-b-lv1H-mainH--align- g-fontFamily-mincho">
            <span><span><span></span></span></span>
            <div class="t0-b-lv1H-mainH__caption-upper" data-cms-path="data.contents.0">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
            <h1 class="t0-b-lv1H-mainH__bd" data-cms-path="data.contents.1">ページ見出し</h1>
            <div class="t0-b-lv1H-mainH__caption-lower" data-cms-path="data.contents.2">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv1H-mainH2 t0-b-lv1H-mainH2--align- g-fontFamily-mincho">
            <span><span><span></span></span></span>
            <div class="t0-b-lv1H-mainH2__caption-upper" data-cms-path="data.contents.0">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
            <h1 class="t0-b-lv1H-mainH2__bd" data-cms-path="data.contents.1">ページ見出し</h1>
            <div class="t0-b-lv1H-mainH2__caption-lower" data-cms-path="data.contents.2">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv1H-mainH t0-b-lv1H-mainH--align- g-fontFamily-marugo">
            <span><span><span></span></span></span>
            <div class="t0-b-lv1H-mainH__caption-upper" data-cms-path="data.contents.0">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
            <h1 class="t0-b-lv1H-mainH__bd" data-cms-path="data.contents.1">ページ見出し</h1>
            <div class="t0-b-lv1H-mainH__caption-lower" data-cms-path="data.contents.2">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv1H-mainH2 t0-b-lv1H-mainH2--align- g-fontFamily-marugo">
            <span><span><span></span></span></span>
            <div class="t0-b-lv1H-mainH2__caption-upper" data-cms-path="data.contents.0">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
            <h1 class="t0-b-lv1H-mainH2__bd" data-cms-path="data.contents.1">ページ見出し</h1>
            <div class="t0-b-lv1H-mainH2__caption-lower" data-cms-path="data.contents.2">ページ見出しを補足する文を書いてください（例：Welcome to Sample Company）</div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv2H t0-b-lv2H--align- t0-b-lv2H--size-2 g-fontFamily-gothic" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv2H__iconPlacer">
                    <span class="t0-b-lv2H__icon"></span>
                </div>
                <h2 data-cms-path="data.contents.0">大見出し</h2>
            </div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv2H2 t0-b-lv2H2--align- t0-b-lv2H2--size-2 g-fontFamily-gothic" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv2H2__iconPlacer">
                    <span class="t0-b-lv2H2__icon"></span>
                </div>
                <h2 data-cms-path="data.contents.0">大見出し</h2>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv2H t0-b-lv2H--align- t0-b-lv2H--size-2 g-fontFamily-mincho" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv2H__iconPlacer">
                    <span class="t0-b-lv2H__icon"></span>
                </div>
                <h2 data-cms-path="data.contents.0">大見出し</h2>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv2H2 t0-b-lv2H2--align- t0-b-lv2H2--size-2 g-fontFamily-mincho" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv2H2__iconPlacer">
                    <span class="t0-b-lv2H2__icon"></span>
                </div>
                <h2 data-cms-path="data.contents.0">大見出し</h2>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv2H t0-b-lv2H--align- t0-b-lv2H--size-2 g-fontFamily-marugo" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv2H__iconPlacer">
                    <span class="t0-b-lv2H__icon"></span>
                </div>
                <h2 data-cms-path="data.contents.0">大見出し</h2>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv2H2 t0-b-lv2H2--align- t0-b-lv2H2--size-2 g-fontFamily-marugo" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv2H2__iconPlacer">
                    <span class="t0-b-lv2H2__icon"></span>
                </div>
                <h2 data-cms-path="data.contents.0">大見出し</h2>
            </div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv3H t0-b-lv3H--align- t0-b-lv3H--size-2 g-fontFamily-gothic" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv3H__iconPlacer">
                    <span class="t0-b-lv3H__icon"></span>
                </div>
                <h3 data-cms-path="data.contents.0">中見出し</h3>
            </div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv3H2 t0-b-lv3H2--align- t0-b-lv3H2--size-2 g-fontFamily-gothic" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv3H2__iconPlacer">
                    <span class="t0-b-lv3H2__icon"></span>
                </div>
                <h3 data-cms-path="data.contents.0">中見出し</h3>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv3H t0-b-lv3H--align- t0-b-lv3H--size-2 g-fontFamily-mincho" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv3H__iconPlacer">
                    <span class="t0-b-lv3H__icon"></span>
                </div>
                <h3 data-cms-path="data.contents.0">中見出し</h3>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv3H2 t0-b-lv3H2--align- t0-b-lv3H2--size-2 g-fontFamily-mincho" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv3H2__iconPlacer">
                    <span class="t0-b-lv3H2__icon"></span>
                </div>
                <h3 data-cms-path="data.contents.0">中見出し</h3>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv3H t0-b-lv3H--align- t0-b-lv3H--size-2 g-fontFamily-marugo" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv3H__iconPlacer">
                    <span class="t0-b-lv3H__icon"></span>
                </div>
                <h3 data-cms-path="data.contents.0">中見出し</h3>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div class="ex-leftSpacingTweak-">
    <div class="b-bPlacer-4s">

        <div class="t0-b-lv3H2 t0-b-lv3H2--align- t0-b-lv3H2--size-2 g-fontFamily-marugo" data-height-part="">
            <span><span><span></span></span></span>
            <div>
                <div class="t0-b-lv3H2__iconPlacer">
                    <span class="t0-b-lv3H2__icon"></span>
                </div>
                <h3 data-cms-path="data.contents.0">中見出し</h3>
            </div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H t0-b-lv4H--align- t0-b-lv4H--size-2 g-fontFamily-gothic" data-height-part=""><span><span><span></span></span></span>
            <div class="t0-b-lv4H__box">
                <div class="t0-b-lv4H__caption-upper" data-cms-path="data.contents.0">装飾見出し補足</div>
                <div class="t0-b-lv4H__bd"><span><span><span></span></span></span>
                    <h4 data-cms-path="data.contents.1">装飾見出し</h4>
                </div>
            </div>
            <div class="t0-b-lv4H__caption-lower" data-cms-path="data.contents.2">装飾見出し補足</div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H2 t0-b-lv4H2--align- t0-b-lv4H2--size-2 g-fontFamily-gothic" data-height-part=""><span><span><span></span></span></span>
            <div class="t0-b-lv4H2__box">
                <div class="t0-b-lv4H2__caption-upper" data-cms-path="data.contents.0">装飾見出し補足</div>
                <div class="t0-b-lv4H2__bd"><span><span><span></span></span></span>
                    <h4 data-cms-path="data.contents.1">装飾見出し</h4>
                </div>
            </div>
            <div class="t0-b-lv4H2__caption-lower" data-cms-path="data.contents.2">装飾見出し補足</div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H t0-b-lv4H--align- t0-b-lv4H--size-2 g-fontFamily-mincho" data-height-part=""><span><span><span></span></span></span>
            <div class="t0-b-lv4H__box">
                <div class="t0-b-lv4H__caption-upper" data-cms-path="data.contents.0">装飾見出し補足</div>
                <div class="t0-b-lv4H__bd"><span><span><span></span></span></span>
                    <h4 data-cms-path="data.contents.1">装飾見出し</h4>
                </div>
            </div>
            <div class="t0-b-lv4H__caption-lower" data-cms-path="data.contents.2">装飾見出し補足</div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H2 t0-b-lv4H2--align- t0-b-lv4H2--size-2 g-fontFamily-mincho" data-height-part=""><span><span><span></span></span></span>
            <div class="t0-b-lv4H2__box">
                <div class="t0-b-lv4H2__caption-upper" data-cms-path="data.contents.0">装飾見出し補足</div>
                <div class="t0-b-lv4H2__bd"><span><span><span></span></span></span>
                    <h4 data-cms-path="data.contents.1">装飾見出し</h4>
                </div>
            </div>
            <div class="t0-b-lv4H2__caption-lower" data-cms-path="data.contents.2">装飾見出し補足</div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H t0-b-lv4H--align- t0-b-lv4H--size-2 g-fontFamily-marugo" data-height-part=""><span><span><span></span></span></span>
            <div class="t0-b-lv4H__box">
                <div class="t0-b-lv4H__caption-upper" data-cms-path="data.contents.0">装飾見出し補足</div>
                <div class="t0-b-lv4H__bd"><span><span><span></span></span></span>
                    <h4 data-cms-path="data.contents.1">装飾見出し</h4>
                </div>
            </div>
            <div class="t0-b-lv4H__caption-lower" data-cms-path="data.contents.2">装飾見出し補足</div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H2 t0-b-lv4H2--align- t0-b-lv4H2--size-2 g-fontFamily-marugo" data-height-part=""><span><span><span></span></span></span>
            <div class="t0-b-lv4H2__box">
                <div class="t0-b-lv4H2__caption-upper" data-cms-path="data.contents.0">装飾見出し補足</div>
                <div class="t0-b-lv4H2__bd"><span><span><span></span></span></span>
                    <h4 data-cms-path="data.contents.1">装飾見出し</h4>
                </div>
            </div>
            <div class="t0-b-lv4H2__caption-lower" data-cms-path="data.contents.2">装飾見出し補足</div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H-numIcon t0-b-lv4H-numIcon--align- t0-b-lv4H-numIcon--size-2 g-fontFamily-gothic" data-height-part="">
            <div>
                <div class="t0-b-lv4H-numIcon__iconPlacer">
                    <span class="t0-b-lv4H-numIcon__icon t0-b-lv4H-numIcon__icon--anshin-1"></span>
                </div>
                <div class="t0-b-lv4H-numIcon__bd">
                    <div class="t0-b-lv4H-numIcon__caption-upper" data-cms-path="data.contents.0">アイコン見出し補足</div>
                    <h4 class="t0-b-lv4H-numIcon__h" data-cms-path="data.contents.1">アイコン見出し</h4>
                    <div class="t0-b-lv4H-numIcon__caption-lower" data-cms-path="data.contents.2">アイコン見出し補足</div>
                </div>
            </div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H-numIcon2 t0-b-lv4H-numIcon2--align- t0-b-lv4H-numIcon2--size-2 g-fontFamily-gothic" data-height-part="">
            <div>
                <div class="t0-b-lv4H-numIcon2__iconPlacer">
                    <span class="t0-b-lv4H-numIcon2__icon t0-b-lv4H-numIcon2__icon--anshin-1"></span>
                </div>
                <div class="t0-b-lv4H-numIcon2__bd">
                    <div class="t0-b-lv4H-numIcon2__caption-upper" data-cms-path="data.contents.0">アイコン見出し補足</div>
                    <h4 class="t0-b-lv4H-numIcon2__h" data-cms-path="data.contents.1">アイコン見出し</h4>
                    <div class="t0-b-lv4H-numIcon2__caption-lower" data-cms-path="data.contents.2">アイコン見出し補足</div>
                </div>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H-numIcon t0-b-lv4H-numIcon--align- t0-b-lv4H-numIcon--size-2 g-fontFamily-mincho" data-height-part="">
            <div>
                <div class="t0-b-lv4H-numIcon__iconPlacer">
                    <span class="t0-b-lv4H-numIcon__icon t0-b-lv4H-numIcon__icon--anshin-1"></span>
                </div>
                <div class="t0-b-lv4H-numIcon__bd">
                    <div class="t0-b-lv4H-numIcon__caption-upper" data-cms-path="data.contents.0">アイコン見出し補足</div>
                    <h4 class="t0-b-lv4H-numIcon__h" data-cms-path="data.contents.1">アイコン見出し</h4>
                    <div class="t0-b-lv4H-numIcon__caption-lower" data-cms-path="data.contents.2">アイコン見出し補足</div>
                </div>
            </div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H-numIcon2 t0-b-lv4H-numIcon2--align- t0-b-lv4H-numIcon2--size-2 g-fontFamily-mincho" data-height-part="">
            <div>
                <div class="t0-b-lv4H-numIcon2__iconPlacer">
                    <span class="t0-b-lv4H-numIcon2__icon t0-b-lv4H-numIcon2__icon--anshin-1"></span>
                </div>
                <div class="t0-b-lv4H-numIcon2__bd">
                    <div class="t0-b-lv4H-numIcon2__caption-upper" data-cms-path="data.contents.0">アイコン見出し補足</div>
                    <h4 class="t0-b-lv4H-numIcon2__h" data-cms-path="data.contents.1">アイコン見出し</h4>
                    <div class="t0-b-lv4H-numIcon2__caption-lower" data-cms-path="data.contents.2">アイコン見出し補足</div>
                </div>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H-numIcon t0-b-lv4H-numIcon--align- t0-b-lv4H-numIcon--size-2 g-fontFamily-marugo" data-height-part="">
            <div>
                <div class="t0-b-lv4H-numIcon__iconPlacer">
                    <span class="t0-b-lv4H-numIcon__icon t0-b-lv4H-numIcon__icon--anshin-1"></span>
                </div>
                <div class="t0-b-lv4H-numIcon__bd">
                    <div class="t0-b-lv4H-numIcon__caption-upper" data-cms-path="data.contents.0">アイコン見出し補足</div>
                    <h4 class="t0-b-lv4H-numIcon__h" data-cms-path="data.contents.1">アイコン見出し</h4>
                    <div class="t0-b-lv4H-numIcon__caption-lower" data-cms-path="data.contents.2">アイコン見出し補足</div>
                </div>
            </div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-lv4H-numIcon2 t0-b-lv4H-numIcon2--align- t0-b-lv4H-numIcon2--size-2 g-fontFamily-marugo" data-height-part="">
            <div>
                <div class="t0-b-lv4H-numIcon2__iconPlacer">
                    <span class="t0-b-lv4H-numIcon2__icon t0-b-lv4H-numIcon2__icon--anshin-1"></span>
                </div>
                <div class="t0-b-lv4H-numIcon2__bd">
                    <div class="t0-b-lv4H-numIcon2__caption-upper" data-cms-path="data.contents.0">アイコン見出し補足</div>
                    <h4 class="t0-b-lv4H-numIcon2__h" data-cms-path="data.contents.1">アイコン見出し</h4>
                    <div class="t0-b-lv4H-numIcon2__caption-lower" data-cms-path="data.contents.2">アイコン見出し補足</div>
                </div>
            </div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-lv5H t0-b-lv5H--align- t0-b-lv5H--size-2 g-fontFamily-gothic" data-height-part="">
            <div class="t0-b-lv5H__caption-upper" data-cms-path="data.contents.0">小見出し補足</div>
            <div class="t0-b-lv5H__main">
                <div class="t0-b-lv5H__bd">
                    <div class="t0-b-lv5H__iconPlacer"><span class="t0-b-lv5H__icon"></span></div>
                    <h5 data-cms-path="data.contents.1">小見出し</h5>
                </div>
            </div>
            <div class="t0-b-lv5H__caption-lower" data-cms-path="data.contents.2">小見出し補足</div>
        </div>
    </div>
</div>

ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-lv5H2 t0-b-lv5H2--align- t0-b-lv5H2--size-2 g-fontFamily-gothic" data-height-part="">
            <div class="t0-b-lv5H2__caption-upper" data-cms-path="data.contents.0">小見出し補足</div>
            <div class="t0-b-lv5H2__main">
                <div class="t0-b-lv5H2__bd">
                    <div class="t0-b-lv5H2__iconPlacer"><span class="t0-b-lv5H2__icon"></span></div>
                    <h5 data-cms-path="data.contents.1">小見出し</h5>
                </div>
            </div>
            <div class="t0-b-lv5H2__caption-lower" data-cms-path="data.contents.2">小見出し補足</div>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-lv5H t0-b-lv5H--align- t0-b-lv5H--size-2 g-fontFamily-mincho" data-height-part="">
            <div class="t0-b-lv5H__caption-upper" data-cms-path="data.contents.0">小見出し補足</div>
            <div class="t0-b-lv5H__main">
                <div class="t0-b-lv5H__bd">
                    <div class="t0-b-lv5H__iconPlacer"><span class="t0-b-lv5H__icon"></span></div>
                    <h5 data-cms-path="data.contents.1">小見出し</h5>
                </div>
            </div>
            <div class="t0-b-lv5H__caption-lower" data-cms-path="data.contents.2">小見出し補足</div>
        </div>
    </div>
</div>

明朝系

バリエーション2

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-lv5H2 t0-b-lv5H2--align- t0-b-lv5H2--size-2 g-fontFamily-mincho" data-height-part="">
            <div class="t0-b-lv5H2__caption-upper" data-cms-path="data.contents.0">小見出し補足</div>
            <div class="t0-b-lv5H2__main">
                <div class="t0-b-lv5H2__bd">
                    <div class="t0-b-lv5H2__iconPlacer"><span class="t0-b-lv5H2__icon"></span></div>
                    <h5 data-cms-path="data.contents.1">小見出し</h5>
                </div>
            </div>
            <div class="t0-b-lv5H2__caption-lower" data-cms-path="data.contents.2">小見出し補足</div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-lv5H t0-b-lv5H--align- t0-b-lv5H--size-2 g-fontFamily-marugo" data-height-part="">
            <div class="t0-b-lv5H__caption-upper" data-cms-path="data.contents.0">小見出し補足</div>
            <div class="t0-b-lv5H__main">
                <div class="t0-b-lv5H__bd">
                    <div class="t0-b-lv5H__iconPlacer"><span class="t0-b-lv5H__icon"></span></div>
                    <h5 data-cms-path="data.contents.1">小見出し</h5>
                </div>
            </div>
            <div class="t0-b-lv5H__caption-lower" data-cms-path="data.contents.2">小見出し補足</div>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション2

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-lv5H2 t0-b-lv5H2--align- t0-b-lv5H2--size-2 g-fontFamily-marugo" data-height-part="">
            <div class="t0-b-lv5H2__caption-upper" data-cms-path="data.contents.0">小見出し補足</div>
            <div class="t0-b-lv5H2__main">
                <div class="t0-b-lv5H2__bd">
                    <div class="t0-b-lv5H2__iconPlacer"><span class="t0-b-lv5H2__icon"></span></div>
                    <h5 data-cms-path="data.contents.1">小見出し</h5>
                </div>
            </div>
            <div class="t0-b-lv5H2__caption-lower" data-cms-path="data.contents.2">小見出し補足</div>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-lv5H-subH t0-b-lv5H-subH--align- t0-b-lv5H-subH--size-2 g-fontFamily-gothic" data-height-part="">
            <h5 data-cms-path="data.contents.0">表組みタイトル</h5>
        </div>
    </div>
</div>

明朝系

バリエーション1

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-lv5H-subH t0-b-lv5H-subH--align- t0-b-lv5H-subH--size-2 g-fontFamily-mincho" data-height-part="">
            <h5 data-cms-path="data.contents.0">表組みタイトル</h5>
        </div>
    </div>
</div>

丸ゴシック系

バリエーション1

<div>
    <div class="b-bPlacer-2s">
        <div class="t0-b-lv5H-subH t0-b-lv5H-subH--align- t0-b-lv5H-subH--size-2 g-fontFamily-marugo" data-height-part="">
            <h5 data-cms-path="data.contents.0">表組みタイトル</h5>
        </div>
    </div>
</div>

書体変更

• f48

ブロック名称：書体変更

[f48:書体変更(機能仕様)]

デザイン・機能仕様：

個別仕様

●

テストケース：

• 指定した通りの書体で表示されていること(文章、画像下説明はNG) （PCのみ）
• 指定なしの場合は、テーマのフォントになっていること （PCのみ）

ゴシック系

バリエーション1

画像見出し

画像内文字

画像内文字

画像見出し

画像の説明を入力してください（フォントが小さく設定された文章です）

詳細はこちらへ

<div>
    <div class="b-bPlacer-3s">
        <div class="t0-b-layoutSplitter t0-b-layoutSplitter--count-1 t0-b-layoutSplitter--spacing-4s">
            <div>
                <div class="t0-b-layoutSplitter__div">
                    <div>
                        <div class="t0-b-media t0-b-media--width-" data-height-part="">
                            <div class="t0-b-media__h-upper t0-b-media--align- g-fontFamily-gothic">
                                <div data-cms-path="data.contents.0">
                                    画像見出し
                                </div>
                            </div>
                            <div class="t0-b-media__media">
                                <span><span><span></span></span></span>
                                <div class="t0-b-media__textOnImage-upper">
                                    <p class="g-fontFamily-gothic" data-cms-path="data.contents.5">
                                        画像内文字
                                    </p>
                                </div>
                                <img src="https://placehold.jp/400x160.png" data-cms-path="data.contents.1">
                                <div class="t0-b-media__textOnImage-lower">
                                    <p class="g-fontFamily-gothic" data-cms-path="data.contents.6">
                                        画像内文字
                                    </p>
                                </div>
                            </div>
                            <div class="t0-b-media__h-lower t0-b-media--align- g-fontFamily-gothic">
                                <div data-cms-path="data.contents.2">
                                    画像見出し
                                </div>
                            </div>
                            <div class="t0-b-media__caption">
                                <p data-cms-path="data.contents.3">
                                    画像の説明を入力してください（フォントが小さく設定された文章です）
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="b-bPlacer-4s">
        <div class="t0-b-navItem t0-b-navItem--size-2 t0-b-navItem--width- t0-b-navItem--align-c g-fontFamily-gothic">
            <div data-cms-path="data.contents.4">
                <span></span>
                <div data-cms-contenteditable="data.contents.4.text">
                    詳細はこちらへ
                </div>
            </div>
        </div>
    </div>
</div>